/**
 * 根布局组件 - Expo Router
 * 使用 Expo Router 进行应用导航管理
 * 配置底部标签导航和全局应用设置
 * 
 * 作者：AI语言学习应用开发团队
 * 创建时间：2024年
 * 更新时间：2024年
 */
import React from 'react';
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { Platform } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';

/**
 * 根布局组件
 * 配置 Expo Router 的标签导航和全局设置
 * 实现多邻国风格的绿色主题和中文标签
 */
export default function RootLayout() {
  return (
    <SafeAreaProvider>
      <StatusBar style="light" backgroundColor="#58CC02" />
      <Tabs
        screenOptions={({ route }) => ({
          // 根据路由名称返回对应的图标
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'index') {
              iconName = focused ? 'home' : 'home-outline'; // 主页图标
            } else if (route.name === 'profile') {
              iconName = focused ? 'person' : 'person-outline'; // 个人资料图标
            } else if (route.name === 'leaderboard') {
              iconName = focused ? 'trophy' : 'trophy-outline'; // 排行榜图标
            } else {
              iconName = 'ellipse-outline'; // 默认图标
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
          // 标签栏样式配置 - 多邻国风格
          tabBarActiveTintColor: '#58CC02', // 激活状态的绿色
          tabBarInactiveTintColor: 'gray', // 非激活状态的灰色
          tabBarStyle: {
            backgroundColor: '#fff', // 白色背景
            borderTopWidth: 1, // 上边框
            borderTopColor: '#e0e0e0', // 边框颜色
            height: Platform.OS === 'android' ? 65 : 85, // 适配不同平台
            paddingBottom: Platform.OS === 'android' ? 8 : 25, // 底部内边距
            paddingTop: 8, // 顶部内边距
          },
          headerShown: false, // 隐藏顶部导航栏，使用自定义 Header 组件
        })}
      >
        {/* 学习模块 - 主页面 */}
        <Tabs.Screen
          name="index"
          options={{
            title: '学习', // 中文标签
          }}
        />
        {/* 排行榜模块 */}
        <Tabs.Screen
          name="leaderboard"
          options={{
            title: '排行榜', // 中文标签
          }}
        />
        {/* 个人资料模块 */}
        <Tabs.Screen
          name="profile"
          options={{
            title: '我的', // 中文标签
          }}
        />
      </Tabs>
    </SafeAreaProvider>
  );
}